<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #board {
        width: 480px;
        height: 320px;
        border: 1px solid black;
        position: relative;
        margin: 0 auto;
      }

      #paddle {
        width: 80px;
        height: 10px;
        background-color: black;
        position: absolute;
        bottom: 0;
      }

      #ball {
        width: 10px;
        height: 10px;
        background-color: red;
        position: absolute;
      }

      .brick {
        width: 75px;
        height: 20px;
        background-color: blue;
        border: 1px solid black;
        position: absolute;
      }

      #brick-container {
        margin-top: 30px;
      }

      #score {
        font-size: 24px;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>弹珠游戏</h1>
    <div id="board">
      <div id="paddle"></div>
      <div id="ball"></div>
      <div id="brick-container"></div>
    </div>
    <div id="score">0</div>
  </body>

  <script>
    let board, paddle, ball, brickCount;
    let paddleX, ballX, ballY;
    let brickWidth = 75,
      brickHeight = 20,
      brickPadding = 10,
      brickOffsetTop = 30,
      brickOffsetLeft = 30;
    let brickRowCount = 3,
      brickColumnCount = 5;
    let x = 3,
      y = -3;
    let leftPressed, rightPressed;
    let score = 0; // 定义分数

    let gameLoop; // 定义全局变量gameLoop

    function startGame() {
      // 初始化分数为0
      score = 0;
      document.getElementById("score").innerHTML = score;

      // 初始化游戏板和弹球
      board = document.getElementById("board");
      paddle = document.getElementById("paddle");
      ball = document.getElementById("ball");
      paddleX = board.offsetWidth / 2 - paddle.offsetWidth / 2;
      ballX = board.offsetWidth / 2 - ball.offsetWidth / 2;
      ballY = board.offsetHeight / 2 - ball.offsetHeight / 2;
      ball.style.left = ballX + "px";
      ball.style.top = ballY + "px";

      // 初始化砖块
      const brickContainer = document.getElementById("brick-container");
      brickContainer.innerHTML = "";
      brickCount = 0;
      for (let i = 0; i < brickRowCount; i++) {
        for (let j = 0; j < brickColumnCount; j++) {
          const brick = document.createElement("div");
          brick.className = "brick";
          brick.style.left =
            j * (brickWidth + brickPadding) + brickOffsetLeft + "px";
          brick.style.top =
            i * (brickHeight + brickPadding) + brickOffsetTop + "px";
          brickContainer.appendChild(brick);
          brickCount++;
        }
      }

      // 初始化键盘事件
      leftPressed = false;
      rightPressed = false;
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

      // 开始
      gameLoop = setInterval(update, 20);
    }

    function keyDownHandler(e) {
      if (e.keyCode === 37) {
        leftPressed = true;
      } else if (e.keyCode === 39) {
        rightPressed = true;
      }
    }

    function keyUpHandler(e) {
      if (e.keyCode === 37) {
        leftPressed = false;
      } else if (e.keyCode === 39) {
        rightPressed = false;
      }
    }

    function update() {
      // 更新球的位置
      ballX += x;
      ballY += y;
      ball.style.left = ballX + "px";
      ball.style.top = ballY + "px";

      // 判断球是否碰到边界
      if (ballX < 0 || ballX + ball.offsetWidth > board.offsetWidth) {
        x = -x;
      }
      if (ballY < 0) {
        y = -y;
      } else if (ballY + ball.offsetHeight > board.offsetHeight) {
        // 判断球是否碰到底部，游戏结束
        clearInterval(gameLoop);
        alert("游戏结束，你的得分是：" + score);
        startGame();
      }

      // 判断球是否碰到挡板
      if (
        ballY + ball.offsetHeight > board.offsetHeight - paddle.offsetHeight &&
        ballX + ball.offsetWidth > paddleX &&
        ballX < paddleX + paddle.offsetWidth
      ) {
        y = -y;
        score += 10; // 碰到挡板加10分
        document.getElementById("score").innerHTML = score; // 实时更新分数
      }

      // 更新挡板位置
      if (leftPressed && paddleX > 0) {
        paddleX -= 5;
      } else if (
        rightPressed &&
        paddleX + paddle.offsetWidth < board.offsetWidth
      ) {
        paddleX += 5;
      }
      paddle.style.left = paddleX + "px";
      console.log(brickCount, "hasdjhsdaf");
      // 判断球是否碰到砖块
      const bricks = document.getElementsByClassName("brick");
      for (let i = 0; i < bricks.length; i++) {
        const brick = bricks[i];
        if (
          ballY < brick.offsetTop + brickHeight &&
          ballY + ball.offsetHeight > brick.offsetTop &&
          ballX + ball.offsetWidth > brick.offsetLeft &&
          ballX < brick.offsetLeft + brickWidth
        ) {
          y = -y;
          brick.style.display = "none";
          brickCount--;
          score += 20; // 碰到砖块加20分
          document.getElementById("score").innerHTML = score; // 实时更新分数
          if (brickCount === 0) {
            clearInterval(gameLoop);
            alert("恭喜你赢得了游戏，你的得分是：" + score);
            startGame();
          }
        }
      }
    }

    startGame();
  </script>
</html>
